<template>
 <el-card shadow="always" :body-style="{ padding: '20px' }">

        <el-button  size="default" :icon="Plus" type="primary" @click="addTradeMark">添加品牌</el-button>
        
          
            <el-dialog v-model="dialogVisible" :title="appendParams.id?'修改品牌':'添加品牌'" width="50%"  draggable>
              <el-form  ref="form" :rules="rules" :inline="false" size="default" :model="appendParams">
              <el-form-item label="品牌名称" prop="tmName">
              <el-input placeholder="请你输入品牌名称" v-model="appendParams.tmName"></el-input>
              </el-form-item>
              <el-form-item label="品牌LOGO" prop="logoUrl">
                <el-upload
                class="avatar-uploader"
                action="/app-dev/admin/product/fileUpload"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
              >
                <img v-if="appendParams.logoUrl" :src="appendParams.logoUrl" class="avatar" />
                <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
              </el-upload>
           
              </el-form-item>
              </el-form>
              
              <template #footer>
                <span class="dialog-footer">
                  <el-button @click="dialogVisible = false">取消</el-button>
                  <el-button type="primary" @click="appendTrademark">
                    确认
                  </el-button>
                </span>
              </template>
            </el-dialog>
      
   
   
  <el-table :data="records" border  style="margin:10px auto">
  <el-table-column label="序号" type="index" width="60"/>
  <el-table-column label="品牌名称" prop="tmName" />
  <el-table-column  label="品牌LOGO" >
     <template #="{row,$index}">
        <img :src="row.logoUrl" style="width:100px" >
      
     </template>
  </el-table-column>
  <el-table-column  label="品牌操作"  >
    <template #="{row,$index}">
        <el-button type="warning" size="small" :icon="Edit" @click="updateTrade(row)"></el-button>
        <el-popconfirm
        :title="`确定要删除${row.tmName}?`"
        confirmButtonText="确认"
        cancelButtonText="取消"
        icon="el-icon-question"
        iconColor="#f90"
        @confirm="deleteTrade(row)"
      >
        <template #reference>
            <el-button type="danger" size="small" :icon="Delete"></el-button>
        
        </template>
        </el-popconfirm>
        
      
      
     </template>
     
  </el-table-column>
  </el-table>
  <el-pagination
      v-model:current-page="page"
      v-model:page-size="limit"
      :page-sizes="[3, 5, 7, 9]"
      :small="false"
      :disabled="false"
      :background="true"
      layout=" prev, pager, next, jumper ,->, sizes,total"
      :total="total"
      @size-change="sizehandler"
      @current-change="getTradeMarkList"
  
    />
  
  
    
    
 </el-card>
 
 
</template>

<script setup lang="ts">
import { reqTradeMark,reqAddorUpdateTradeMark,deleteTradeMark } from '@/api/product/trademark'
import {
Plus,
Edit,
Delete
} from '@element-plus/icons-vue'

import {ref,onMounted, nextTick, reactive} from 'vue'

import { ElMessage } from 'element-plus'
import type { UploadProps,FormRules } from 'element-plus'



 const page=ref<number>(1)
 const limit=ref<number>(3)
 const total=ref<number>(0)
 const records=ref([])
 const dialogVisible=ref(false)
 const appendParams=reactive<any>({
    logoUrl:'',
    tmName:''
 })
 const form=ref()

 onMounted(()=>{
     getTradeMarkList()
 })
 
const validatePass = (rule: any, value: any, callback: any) => {
    if(/^[\u4e00-\u9fa5]{2,}$/.test(value)){
        callback()
    }else{
        callback(new Error("品牌名字汉字大于等于2位"))
    }

}
 const rules = reactive<FormRules>({
  tmName: [
    { required: true, message: '请填写品牌名称', trigger: 'blur' },
    { trigger:'change', validator:validatePass },
  ],
  logoUrl:[
    {required:true,message:'请添加图片'}
  ]

})
//  添加品牌的回调
 const addTradeMark=()=>{


    dialogVisible.value = true
    nextTick(()=>{
     form.value.resetFields()
        appendParams.logoUrl=''
        appendParams.tmName=''
        appendParams.id=0
    })
 }
 const getTradeMarkList=async ()=>{
let res:any=  await reqTradeMark(page.value,limit.value)


   records.value=res.records
    total.value=res.total
  
 }
 const sizehandler=()=>{
     page.value=1
     getTradeMarkList()
 }
//  头像的代码



const handleAvatarSuccess: UploadProps['onSuccess'] = (
  response,
  uploadFile
) => {
    
    
  appendParams.logoUrl = response.data
}

const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
  if (rawFile.type !== 'image/jpeg') {
    ElMessage.error('请传入gif格式照片')
    return false
  } else if (rawFile.size / 1024 / 1024 > 5) {
    ElMessage.error('图片好大啊')
    return false
  }
  return true
}
// 点击save添加或更新品牌成功
const appendTrademark=async()=>{
  await form.value.validate()
    
    
     try {
        await reqAddorUpdateTradeMark(appendParams)
        ElMessage({
            type:'success',
            message:appendParams.id?'修改品牌成功':'添加品牌成功'
        })
        dialogVisible.value = false
 
        getTradeMarkList()


     } catch (error) {
        
     }
}
// 更新品牌数据 跳转界面加整理参数
const updateTrade=(row:any)=>{
    
    
    

    dialogVisible.value = true
    nextTick(()=>{
        form.value.resetFields()
        appendParams.logoUrl=row.logoUrl
    appendParams.tmName=row.tmName
    appendParams.id=row.id
    })
    
    

}
const  deleteTrade=async(row:any)=>{
    try {
        await deleteTradeMark(row.id)
        ElMessage({
            type:'success',
            message:'删除成功'
        })
        getTradeMarkList()
    } catch (error) {
        ElMessage({
            type:'error',
            message:'系统数据删除不了~~~'
        })
        
    }
    

}
</script>

<style scoped>
.avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
<style >

.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
  }
  
  .avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
  }
  
  .el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
  }
</style>